<template>
  <div class="login">
    <el-row >
      <el-col :span="13" class="left-side">
        <!-- 左侧内容 -->
        <div class="block text-center" m="t-4">
          <el-carousel trigger="click" height="850px">
            <el-carousel-item v-for="img in imgs" :key="img">
              <el-image :src="img" ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="11" class="right-side">
        <!-- 右侧内容 -->
        <div id="logo" ></div>
       <div class="right-from">
         <el-form ref="loginForm" :model="form"  v-if="showLogin"
                  label-width="120px"
                  size="large"
                 >

           <el-form-item label="用户名" prop="username"  >
             <el-input v-model="form.username" placeholder="请输入用户名" >
               <template #prefix>
                 <el-icon><UserFilled /></el-icon>
               </template>
             </el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
             <el-input v-model="form.password" type="password" placeholder="请输入密码" >
               <template #prefix>
                 <el-icon><Lock /></el-icon>
               </template>
             </el-input>
           </el-form-item>
           <el-form-item >
             <el-button type="primary" @click="submitForm" v-model="keyDown ">登录</el-button>
             <el-button round @click="signUp" >注册账号</el-button>
           </el-form-item>
           <el-button link type="info" @click="" style="margin-left: 300px;margin-bottom: 200px">
             寻找密码
           </el-button>
         </el-form>
<!--          <div v-if="showRegister">-->
<!--            <router-view/>-->
<!--          </div>-->
<!--          注册组件-->
           <register @relogin="childEvent" v-if="showRegister"></register>

       </div>

      </el-col>
    </el-row>
  </div>
</template>

<script setup >
import {  onMounted,ref,reactive ,onUnmounted } from 'vue';
import router from "../../router";
import { ElMessage } from 'element-plus'
import * as userApi from "@/api/user.js"
import {useUserStore} from "@/stores";
import img1 from "@/assets/img/login/1.jpg"
import img2 from "@/assets/img/login/2.jpg"
import img3 from "@/assets/img/login/3.jpg"
import register from '@/views/Login/Register.vue'
import * as echarts from 'echarts'
  //初始化logo
  onMounted(()=>{
    initLogo();
    window.addEventListener('keydown', keyDown);
  });

  //销毁事件
  onUnmounted(() => {
    window.removeEventListener('keydown', keyDown, false)
  })


  // 首页图片的集合
    const imgs = reactive([img1,img2,img3])
    let showLogin = ref(true);//控制登录页隐藏
    let showRegister = ref(false);//控制注册页隐藏
    const userStore = useUserStore()//token商店
    const form = ref({username: '', password: '',});


    const keyDown = (e) => {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
          submitForm()
      }
    }
    //提交登录
    const submitForm = () => {
      if (form.value.username==''||form.value.password==''){
        ElMessage({
          showClose: true,
          message: '请输入用户名和密码',
          type: 'error',
        })
        return false
      }

      // 进行登录逻辑处理
      userApi.login(form.value).then(resp=>{
        //判断是否管理员登录
        // if (resp.data.admin===1){
        //   userStore.setToken(resp.data.token)//存token
        //   ElMessage({showClose: false, message: '登录成功', type: 'success'})
        //   //跳到管理员界面
        //   router.push('/admin')
        // }else {
          userStore.setToken(resp.data.token)//存token
          //跳到普通用户界面
          ElMessage({showClose: false, message: '登录成功', type: 'success'})
          router.push('/')
      }).catch(error=>{
        ElMessage({showClose: false, message: '登录失败', type: 'error',})
      })
    };


    //注册
    const signUp = () => {
      showLogin.value=false
      showRegister.value=true
      // return
      router.push('/register')
    };


    //从注册页返回
    const childEvent= () =>{
        showLogin.value=true
        showRegister.value=false
        form.value.username=''
        form.value.password=''
    }

    //logo的echarts设置
    function initLogo(){
      let myChart = echarts.init(document.getElementById('logo'));
      let option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: 'xgxd',
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: 'pink',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: false,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 0,
                    style: {
                      fill: 'pink'
                    }
                  }
                ]
              }
            }
          ]
        }
      };

      myChart.setOption(option);

    }






</script>

<style scoped>
.login{
  height: 120%;
  width: 100%;
  background-color: rgba(177, 112, 255, 0.44);
}
#logo{
  width: 700px;
  height: 300px;

}

.right-side {
  text-align: center;
  /*background: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186),#fad0c4);*/
  /*background-color: rgb(114, 135, 254);*/
  background: linear-gradient(-45deg, deepskyblue, #23d5ab,rgb(114, 135, 254),rgb(130, 88, 186));
  animation: gradientBG 10s ease infinite;
  background-size: 600% 600%;


}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }

}
.right-from {
  position:absolute;
  top:30%;
  left:63%;
}

</style>
